<template>
	<el-main>
		<el-card shadow="never">
			<el-tabs tab-position="top">

				<el-tab-pane label="系统设置">
					<el-form ref="form" :model="sys" label-width="100px" style="margin-top: 20px;">
						<el-form-item label="系统名称">
							<el-input v-model="sys.name" placeholder="请输入系统名称"></el-input>
						</el-form-item>
						<el-form-item label="Logo">
							<sc-upload v-model="sys.logoUrl" title="请上传Logo"></sc-upload>
						</el-form-item>
						<el-form-item label="登录开关">
							<el-switch v-model="sys.login" active-value="1" inactive-value="0"></el-switch>
							<div class="el-form-item-msg" data-v-b33b3cf8="">关闭后普通用户无法登录，仅允许管理员角色登录</div>
						</el-form-item>
						<el-form-item label="密码验证规则">
<!--							^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$-->
							<el-input v-model="sys.passwordRules" placeholder="请输入密码验证规则"></el-input>
						</el-form-item>
						<el-form-item label="版权信息">
							<el-input type="textarea" :autosize="{minRows: 4}" v-model="sys.copyright" placeholder="请输入版权信息"></el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" :loading="isSaveing" @click="sysSubmit()">保 存</el-button>
						</el-form-item>
					</el-form>
				</el-tab-pane>

				<el-tab-pane label="短信配置">
					<el-form ref="formSms" :model="sms" label-width="100px" style="margin-top: 20px;">
						<el-form-item label="短信开关">
							<el-switch v-model="sms.open" active-value="1" inactive-value="0"></el-switch>
							<div class="el-form-item-msg" data-v-b33b3cf8="">关闭后用户无法收到短信，但日志中将记录</div>
						</el-form-item>
						<el-form-item label="appKey">
							<el-input v-model="sms.appKey" placeholder="请输入appKey"></el-input>
						</el-form-item>
						<el-form-item label="secretKey">
							<el-input v-model="sms.secretKey" placeholder="请输入secretKey"></el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" :loading="isSaveing" @click="smsSubmit()">保 存</el-button>
						</el-form-item>
					</el-form>
				</el-tab-pane>

				<el-tab-pane label="扩展配置">
					<el-alert title="扩展配置为系统业务所有的配置，应该由系统管理员操作，如需用户配置应另起业务配置页面。" type="warning" style="margin-bottom: 15px;"></el-alert>

					<el-table :data="setting" stripe>
						<el-table-column label="序号" type="index" width="50"></el-table-column>
						<el-table-column label="文字说明" prop="name" width="350">
							<template #default="scope">
								<el-input v-if="scope.row.isSet" v-model="scope.row.name" placeholder="请输入文字说明"></el-input>
								<span v-else>{{scope.row.name}}</span>
							</template>
						</el-table-column>
						<el-table-column label="分类标识" prop="category" width="150">
							<template #default="scope">
								<el-input v-if="scope.row.isSet" v-model="scope.row.category" placeholder="请输入分类标识"></el-input>
								<span v-else>{{scope.row.category}}</span>
							</template>
						</el-table-column>
						<el-table-column label="KEY" prop="key" width="150">
							<template #default="scope">
								<el-input v-if="scope.row.isSet" v-model="scope.row.key" placeholder="请输入KEY"></el-input>
								<span v-else>{{scope.row.key}}</span>
							</template>
						</el-table-column>
						<el-table-column label="VALUE" prop="value" width="350">
							<template #default="scope">
								<template v-if="scope.row.isSet">
									<el-input v-model="scope.row.value" placeholder="请输入VALUE"></el-input>
								</template>
								<span v-else>{{scope.row.value}}</span>
							</template>
						</el-table-column>
						<el-table-column min-width="1"></el-table-column>
						<el-table-column label="操作" fixed="right" width="120">
							<template #default="scope">
								<el-button-group>
									<el-button @click="table_edit(scope.row, scope.$index)" text type="primary" size="small">{{scope.row.isSet?'保存':"修改"}}</el-button>
									<el-button v-if="scope.row.isSet" @click="scope.row.isSet=false" text type="primary" size="small">取消</el-button>
									<el-popconfirm v-if="!scope.row.isSet" title="确定删除吗？" @confirm="table_del(scope.row, scope.$index)">
										<template #reference>
											<el-button text type="primary" size="small">删除</el-button>
										</template>
									</el-popconfirm>
								</el-button-group>
							</template>
						</el-table-column>
					</el-table>
					<el-button type="primary" icon="el-icon-plus" @click="table_add" style="margin-top: 20px;"></el-button>
				</el-tab-pane>

			</el-tabs>
		</el-card>
	</el-main>
</template>

<script>
	export default {
		name: 'config',
		data() {
			return {
				isSaveing: false,
				sys: {
					type: "sys",
					name: "",
					logoUrl: "",
					login: "1",
					passwordRules: "^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$",
					copyright: ""
				},
				sms: {
					type: "sms",
					open: "1",
					appKey: "",
					secretKey: ""
				},
				setting: [
				]
			}
		},
		mounted() {
			this.getSysConfig()
			this.getSmsConfig()
			this.getExtendConfig()
		},
		methods: {
			table_add(){
				var newRow = {
					id: 0,
					key: "",
					value: "",
					name: "",
					category: "",
					type: "extend",
					isSet: true
				}
				this.setting.push(newRow)
			},
			table_edit(row,index){
				if(row.isSet){
					if(row.id==0){
						this.$API.system.configSetting.add.post(row).then(res=>{
							if (res.code == 200) {
								if (row.id == 0) {
									this.setting[index].id = res.data;
									console.log(this.setting[index]);
								}
								this.$message.success("保存成功")
								row.isSet = false
							}
						})

					}else{
						this.$API.system.configSetting.save.post(row).then(res=>{
							if (res.code == 200) {
								if (row.id == 0) {
									this.setting[index].id = res.data;
									console.log(this.setting[index]);
								}
								this.$message.success("保存成功")
								row.isSet = false
							}
						})
					}
					row.isSet = false
				}else{
					row.isSet = true
				}
			},
			async table_del(row, index){
				if(row.id!=0){
					var res = await this.$API.system.configSetting.delete.post({id:row.id});
					if (res.code == 200) {
						this.$message.success("删除成功")
					}
				}
				this.setting.splice(index, 1)
			},
			sysSubmit() {
				this.$refs.form.validate(async (valid) => {
					if (valid) {
						this.isSaveing = true;
						var res = await this.$API.system.configSetting.settingConfig.post(this.sys);
						this.isSaveing = false;
						if (res.code == 200) {
							this.$emit('success', this.form)
							this.$message.success("操作成功")
						}
					}
				})
			},
			smsSubmit() {
				this.$refs.formSms.validate(async (valid) => {
					if (valid) {
						this.isSaveing = true;
						var res = await this.$API.system.configSetting.settingConfig.post(this.sms);
						this.isSaveing = false;
						if (res.code == 200) {
							this.$emit('success', this.formSms)
							this.$message.success("操作成功")
						}
					}
				})
			},
			async getSysConfig() {
				var res = await this.$API.system.configSetting.getAll.post({type: "sys"})
				if (res.code == 200) {
					res.data.forEach((item) => {
						this.sys[item.key] = item.value;
					})
				}
			},
			async getSmsConfig() {
				var res = await this.$API.system.configSetting.getAll.post({type: "sms"})
				if (res.code == 200) {
					res.data.forEach((item) => {
						this.sms[item.key] = item.value;
					})
				}
			},
			async getExtendConfig() {
				var res = await this.$API.system.configSetting.getAll.post({type: "extend"})
				if (res.code == 200) {
					this.setting = res.data;
				}
			}
		}
	}
</script>

<style>
</style>
